<template>
  <div v-drawerDrag>
    <el-drawer v-model="visible"  title="编辑" direction="rtl" size="890px" >
      <el-form ref="formRef" :model="form" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="时间" >
              <FieldEditDatePicker
                v-model:desc="form.date"
                input-key="date"
                :row="form"
                type="date"
                value-format="YYYY-MM-DD"
                @update-value="updateValue"
              ></FieldEditDatePicker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="姓名" >
              <FieldEditText
                v-model:desc="form.name"
                input-key="name"
                :row="form"
                placeholder="请输入姓名"
                @update-value="updateValue"
              ></FieldEditText>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地区" >
              <FieldEditText
                v-model:desc="form.province"
                input-key="province"
                :row="form"
                @update-value="updateValue"
              ></FieldEditText>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="城市" >
              <FieldEditText
                v-model:desc="form.city"
                input-key="city"
                :row="form"
                @update-value="updateValue"
              ></FieldEditText>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="地址" >
              <FieldEditText
                v-model:desc="form.address"
                input-key="address"
                :row="form"
                type="textarea"
                @update-value="updateValue"
              ></FieldEditText>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup name="editPreview">
import FieldEditText from '@/components/fieldEdit/text.vue'
import FieldEditDatePicker from '@/components/fieldEdit/date-picker.vue'
import _ from 'lodash'
import { ObjTy } from '~/common'
const visible = ref(false)
interface _type {
  name?: any
  city?: any
  address?: any
  province?: any
  date?: any
}

let form = ref<_type>({})
const showDrawer = async (row: _type) => {
  form.value = row
  visible.value = true
}
const updateValue = (obj: _type) => {
  console.log(obj)
  type formType = keyof typeof form.value
  Object.keys(obj).forEach((key) => {
    form.value[key as formType] = obj[key as formType]
  })
}
defineExpose({ visible, showDrawer })
</script>
